<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/header :: common_header(~{::title}, ~{::link}, ~{::script})">
    <title>权限授权</title>
    <link rel="stylesheet" href="../../static/lib/bootstrap/bootstrap.min.css" th:href="@{/lib/bootstrap/bootstrap.min.css}">
    <link rel="stylesheet" href="../../static/lib/bootstrap/bootstrap-duallistbox.min.css"
          th:href="@{/lib/bootstrap/bootstrap-duallistbox.min.css}">

    <!-- My JavaScript -->
    <script src="../../static/lib/bootstrap/jquery.bootstrap-duallistbox.min.js"
            th:src="@{/lib/bootstrap/jquery.bootstrap-duallistbox.min.js}"></script>
    <script src="../../static/app/sys/auth.js" th:src="@{/app/sys/auth.js}"></script>
</head>

<body class="easyui-layout" data-options="fit:true" style="margin:2px;">
<style>
    .panel-body {
        padding: 5px;
    }
</style>

<div data-options="region:'west',title:'角色列表',hideCollapsedContent:false,collapsible:false"
     style="width: 300px;padding: 5px;">
    <div id="roleGrid-toolbar" style="padding:5px;"><!-- 上 右 下 左  -->
        <form id="searchForm" class="search-form">
            <div class="form-item">
                <input id="sf_name" name="name" class="easyui-validatebox easyui-textbox" prompt="角色名称"/>
            </div>
            <div class="form-item">
                <a href="javascript:;" class="easyui-linkbutton primary" plain="true" iconCls="fa fa-search"
                   onclick="searchRole()">查找</a>
                <a href="javascript:;" class="easyui-linkbutton" iconCls="e-icon fa fa-repeat"
                   onclick="resetSearchRole()">重置</a>
            </div>
        </form>
    </div>
    <table id="roleGrid" data-options="toolbar:'#roleGrid-toolbar'"></table>
</div>
<div data-options="region:'center',title:'',border:false">
    <div id="authTabs" class="easyui-tabs" data-options="fit:true">

        <div title="角色与权限" style="padding:10px;">
            <p>角色与权限的关系维护。注意：灰色标记的权限模块和权限不可选。</p>
            <div class="form-item" style="text-align: right;">
                <a href="javascript:;" class="easyui-linkbutton" permission="sys:auth:saveUser"
                   iconCls="fa fa-save" onclick="saveRoleAcl()">保存权限</a>
            </div>
            <ul id="roleAclTree"></ul>
        </div>
        <div title="角色与用户" style="overflow: hidden;padding:10px;">
            <p>角色与用户的关系维护。</p>
            <div class="form-item" style="text-align: right;">
                <a href="javascript:;" class="easyui-linkbutton" permission="sys:auth:saveAcl"
                   iconCls="fa fa-save" onclick="saveRoleUser()">保存用户</a>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <select multiple="multiple" size="20" name="roleUserList" id="roleUserList"
                            style="height: 400px;"></select>
                </div>
            </div>
            <br/>
        </div>


    </div>
</div>
<div th:replace="~{fragments/footer :: footer}">...</div>
<!-- My JavaScript -->

</body>
</html>
